<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五神鸟文化传承数字博物馆</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&amp;family=Noto+Sans+SC:wght@400;500;700&amp;display=swap" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'Calligraphy';
            src: local('Ma Shan Zheng'), local('ZCOOL XiaoWei');
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #0a1a35;
            color: #e0e0e0;
            overflow-x: hidden;
        }
        
        .calligraphy {
            font-family: 'Calligraphy', serif;
        }
        
        .glass-effect {
            background: rgba(10, 26, 53, 0.8);
            backdrop-filter: blur(10px);
        }
        
        .scroll-animation {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        
        .animate-in {
            opacity: 1;
            transform: translateY(0);
        }
        
        .image-hover {
            transition: transform 0.5s ease;
        }
        
        .image-hover:hover {
            transform: scale(1.05);
        }
        
        .image-label {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .image-container:hover .image-label {
            opacity: 1;
        }
        
        .gold-border {
            border: 1px solid #d4af37;
        }
        
        .gold-text {
            color: #d4af37;
        }
        
        .highlight-bar {
            position: relative;
        }
        
        .highlight-bar::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background-color: #d4af37;
        }
        
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* 导航栏样式 */
        .nav-glass {
            background: rgba(10, 26, 53, 0.9);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .logo-glow {
            animation: glow 1.5s infinite alternate;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 5px rgba(212, 175, 55, 0.7), 0 0 10px rgba(212, 175, 55, 0.5);
            }
            to {
                text-shadow: 0 0 10px rgba(212, 175, 55, 1), 0 0 20px rgba(212, 175, 55, 0.7);
            }
        }
        
        /* 按钮样式 */
        .btn-outline-gold {
            border: 1px solid #d4af37;
            color: #d4af37;
            transition: background-color 0.3s, color 0.3s;
        }
        
        .btn-outline-gold:hover {
            background-color: #d4af37;
            color: #0a1a35;
        }
        
        /* 页脚样式 */
        .divider-gold {
            height: 2px;
            background: linear-gradient(to right, transparent, #d4af37, transparent);
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="nav-glass fixed top-0 w-full py-3 z-50 transition-all duration-300">
      <div class="container mx-auto px-6 flex justify-between items-center">
        <!-- Logo -->
        <div class="flex items-center">
          <iconify-icon class="logo-glow" icon="fa6-solid:feather-pointed" width="42" height="42" style="color: #d4af37"></iconify-icon>
          <h1 class="ml-3 text-xl font-bold text-white font-['ZCOOL_XiaoWei']">五神鸟</h1>
        </div>
        <!-- 导航链接 -->
        <nav class="relative">
          <ul class="flex space-x-8">
            <li class="relative">
              <a href="首頁.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">首页</a>
            </li>
            <li class="relative">
              <a href="神鳥傳説界面.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">神鸟传说</a>
              <div class="nav-active-indicator w-full" style="width: 100%;"></div>
            </li>
            <li class="relative">
              <a href="科技神韻界面.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">科技互动</a>
            </li>
            <li class="relative">
              <a href="文化传承.html" class="text-white hover:text-d4af37 transition-colors relative py-2">文化传承</a>
            </li>
            <li class="relative">
              <a href="关于我们.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">关于我们</a>
            </li>
          </ul>
        </nav>
        <!-- 右侧操作 -->
        <div class="flex items-center space-x-4">
          <div class="relative">
            <iconify-icon class="text-gray-300 hover:text-d4af37 cursor-pointer" icon="ion:search" width="24"></iconify-icon>
          </div>
          <!-- <button class="btn-outline-gold px-4 py-1 rounded-full text-sm flex items-center">
            <iconify-icon icon="ion:language" class="mr-1"></iconify-icon> 中文
          </button> -->
        </div>
      </div>
    </header>

    <!-- Banner区 -->
    <section class="w-full h-[600px] relative" style="background: linear-gradient(rgba(0,0,0,0.8), transparent 50%), url('/mb-potato/image/placeholder.svg') center/cover;">
        <div class="absolute inset-0 flex flex-col items-center justify-center pt-20">
            <h1 class="calligraphy gold-text text-7xl mb-5 tracking-wider">神脉永承</h1>
            <p class="text-white text-2xl">穿越时光的信仰回响</p>
        </div>
    </section>

    <!-- 文化脉络总览区 -->
    <section class="w-full py-16 bg-[#0a0a0a] px-[15%] scroll-animation">
        <div class="flex">
            <div class="w-3/5 pr-10">
                <h2 class="calligraphy gold-text text-4xl mb-8">灵脉溯源</h2>
                <p class="text-[#e0e0e0] text-lg leading-relaxed mb-6">
                    五神鸟文化起源于中国古代天文学中的四象二十八星宿体系，最早可追溯至战国时期。凤凰作为祥瑞等意象代表，与其他神鸟共同参与构建了中国古代的宇宙观。这种信仰体系不仅影响了天文历法，更渗透到哲学、艺术和文学各个领域。
                </p>
                <p class="text-[#e0e0e0] text-lg leading-relaxed">
                    在哲学思想中，这些神鸟承载着“礼”与生命力的内涵，象征着光明与重生。在文学艺术方面，从《山海经》的神话描述到唐宋诗词的意象运用，神鸟形象不断演变丰富。建筑装饰中常见神鸟纹样，民俗活动中神鸟更是吉祥如意的象征，深刻影响着中国人的精神世界。
                </p>
            </div>
            <div class="w-2/5 relative">
                <img id="1" src="https://modao.cc/ai/uploads/ai_pics/20/207727/aigp_1756897840.jpeg" alt="Ancient Chinese constellation map showing the twenty-eight mansions" class="w-full h-[400px] object-cover gold-border">
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="w-4/5 h-4/5 rounded-full" style="box-shadow: 0 0 60px 30px rgba(255,77,77,0.6);"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心文化象征详解区 -->
    <section class="w-full py-20 px-[15%] bg-[#0a1a35]">
        <!-- 鹪明板块 -->
        <article class="mb-16 p-10 rounded-xl scroll-animation" style="background-color: rgba(255,77,77,0.1);">
            <div class="flex mb-8">
                <img id="2" src="https://modao.cc/ai/uploads/ai_pics/20/207728/aigp_1756897842.jpeg" alt="Vermilion Bird line art illustration" class="w-32 h-32 mr-6">
                <h3 class="calligraphy gold-text text-3xl self-center">神谕新声</h3>
            </div>
            
            <h4 class="text-white font-bold text-2xl mb-6">创新·延火·生命</h4>
            
            <div class="text-[#e0e0e0] text-base leading-relaxed mb-10">
                <p class="mb-4">五只神鸟，携银河星辉栖于文化长河，以“延火”为使命、“创新”为羽翼，守护着文明与生命的脉动。它们衔住古老火种却不拘泥于形式，以创新视角为传统注入新解。</p>
                <p class="mb-4">在民俗层面，它们亦如端午“驱邪避灾”的凤鸟图腾，以新载体延续文化意涵：或是将传统纸鸢上的星鸟纹样，转化为文创饰品与数字藏品；或是以沉浸式戏剧重现古人心目中“星鸟司分”的节气智慧。</p>
                <p>例如，鹪明被视为祥瑞之鸟，在节庆装饰、婚嫁礼仪中广泛应用，象征吉祥与美好愿景。南方少数民族的祭祀活动中，鹪明图腾仍保留着原始信仰的痕迹。</p>
            </div>
            
            <div class="flex justify-between">
                <div class="image-container w-[31%] relative">
                    <img id="3" src="https://modao.cc/ai/uploads/ai_pics/20/207729/aigp_1756897844.jpeg" alt="Han Dynasty Vermilion Bird patterned eave tile" class="w-full h-48 object-cover rounded image-hover">
                    <div class="image-label absolute top-0 left-0 right-0 bg-black bg-opacity-70 text-white text-sm text-center py-2">汉代鹪明纹瓦当 | 公元前2世纪</div>
                </div>
                <div class="image-container w-[31%] relative">
                    <img id="4" src="https://modao.cc/ai/uploads/ai_pics/20/207730/aigp_1756897846.jpeg" alt="Illustration of Vermilion Bird from Shan Hai Jing" class="w-full h-48 object-cover rounded image-hover">
                    <div class="image-label absolute top-0 left-0 right-0 bg-black bg-opacity-70 text-white text-sm text-center py-2">《山海经》鹪明插图 | 明代复刻</div>
                </div>
                <div class="image-container w-[31%] relative">
                    <img id="5" src="https://modao.cc/ai/uploads/ai_pics/20/207731/aigp_1756897848.jpeg" alt="Modern Chinese style sneaker with Vermilion Bird design" class="w-full h-48 object-cover rounded image-hover">
                    <div class="image-label absolute top-0 left-0 right-0 bg-black bg-opacity-70 text-white text-sm text-center py-2">现代国潮鹪明球鞋设计 | 2023</div>
                </div>
            </div>
        </article>
        
        <!-- 幽昌板块 -->
        <article class="mb-16 p-10 rounded-xl scroll-animation" style="background-color: rgba(77,208,225,0.1);">
            <div class="flex mb-8">
                <img id="6" src="https://modao.cc/ai/uploads/ai_pics/20/207732/aigp_1756897850.jpeg" alt="Azure Bird line art illustration" class="w-32 h-32 mr-6">
                <h3 class="calligraphy gold-text text-3xl self-center">圣火永续</h3>
            </div>
            
            <h4 class="text-white font-bold text-2xl mb-6">希望·春风·未来</h4>
            
            <div class="text-[#e0e0e0] text-base leading-relaxed mb-10">
                <p class="mb-4">五只神鸟共擎文明星火，以“希望”为不灭之炬，借“春风”为传薪之驿，在古今交融的岁月里，铺就一条通往“未来”的文化传承之路。</p>
                <p class="mb-4">唐诗宋词中，“凤凰台上凤凰游”喻祥瑞，“青鸟不传云外信”寄情思；民俗里，它们更似暖心春风：端午龙舟的鸾鸟纹饰祈福安康，元宵灯会的灵鸟造型点亮团圆。</p>
                <p>如今，神鸟以新姿续火，化作校园神话情景剧，让孩童触摸古老智慧；融入数字文创，让传统纹样在云端流转。</p>
            </div>
            
            <div class="flex justify-between">
                <div class="image-container w-[31%] relative">
                    <img id="7" src="https://modao.cc/ai/uploads/ai_pics/20/207733/aigp_1756897852.jpeg" alt="Tang Dynasty silk embroidery with Azure Bird motif" class="w-full h-48 object-cover rounded image-hover">
                    <div class="image-label absolute top-0 left-0 right-0 bg-black bg-opacity-70 text-white text-sm text-center py-2">唐代幽昌纹丝绸刺绣 | 公元8世纪</div>
                </div>
                <div class="image-container w-[31%] relative">
                    <img id="8" src="https://modao.cc/ai/uploads/ai_pics/20/207734/aigp_1756897855.jpeg" alt="Song Dynasty lacquerware with Azure Bird design" class="w-full h-48 object-cover rounded image-hover">
                    <div class="image-label absolute top-0 left-0 right-0 bg-black bg-opacity-70 text-white text-sm text-center py-2">宋代幽昌纹漆器 | 公元12世纪</div>
                </div>
                <div class="image-container w-[31%] relative">
                    <img id="9" src="https://modao.cc/ai/uploads/ai_pics/20/207735/aigp_1756897857.jpeg" alt="Contemporary fashion design inspired by Azure Bird" class="w-full h-48 object-cover rounded image-hover">
                    <div class="image-label absolute top-0 left-0 right-0 bg-black bg-opacity-70 text-white text-sm text-center py-2">现代幽昌元素时装设计 | 2023</div>
                </div>
            </div>
        </article>
    </section>

    <!-- 现代传承区 -->
    <section class="w-full py-16 px-[15%] bg-[#0a1a35] scroll-animation">
        <h2 class="calligraphy gold-text text-4xl text-center mb-12">时语圣契：神鸟圣域的现世回响</h2>
        
        <p class="text-white text-lg text-center leading-relaxed max-w-4xl mx-auto mb-16">
            古老的神鸟自《山海经》与斑驳古卷中苏醒，穿越时空裂隙，以游戏与数字艺术为舟楫，在此与你展开一场跨越维度的对话。在冒险之境，神鸟化为触手可及的灵伴：或是作为仙侠世界中的祥瑞坐骑，邀你驭风而行，穿越云海山川，于“凤凰涅槃”的光辉中亲历传说；或是成为谜题深处的关键图腾，破译羽翼中的古老星图，读懂先民观测天宇的智慧，让每一次探索都成为通向传统的秘径。数字艺术的灵韵之中，神鸟焕发新生：3D神力重塑“重明鸟”，双瞳流转符文辉光，既承“驱邪避晦”之古意，亦显赛博神性之美；动态绘卷演绎“青鸟传信”，以现代节奏传递千年未改的浪漫誓约。这一切转译，让神鸟不再囿于沉寂历史，而成为你可对话、可共鸣、可追随的文明使者，让永恒的神性血脉，于今世重燃。
        </p>
        
        <div class="flex justify-between items-center max-w-5xl mx-auto">
            <div class="flex flex-col space-y-5">
                <span class="iconify text-4xl gold-text mx-auto" data-icon="mdi:movie"></span>
                <span class="iconify text-4xl gold-text mx-auto" data-icon="mdi:gamepad-variant"></span>
                <span class="iconify text-4xl gold-text mx-auto" data-icon="mdi:brush"></span>
            </div>
            
            <div class="w-1/2 flex justify-center">
                    <div class="bg-gray-700 w-64 h-40 rounded-lg flex items-center justify-center">
                        <img src="展翅飞翔.webp" alt="神鸟图像" class="w-full h-full object-cover rounded-lg">
                    </div>
            </div>
            
            <div class="flex flex-col space-y-5">
                <span class="iconify text-4xl gold-text mx-auto" data-icon="mdi:artificial-intelligence"></span>
                <span class="iconify text-4xl gold-text mx-auto" data-icon="mdi:cloud"></span>
                <span class="iconify text-4xl gold-text mx-auto" data-icon="mdi:palette"></span>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="py-12 border-t border-amber-900 relative z-10">
      <div class="container mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <div class="flex items-center mb-6">
              <iconify-icon icon="fa6-solid:feather-pointed" width="32" style="color: #d4af37"></iconify-icon>
              <h3 class="text-xl font-bold ml-2">五神鸟</h3>
            </div>
            <p class="text-gray-400 text-sm leading-relaxed">
              以现代科技演绎传统文化，打造文化传承新体验，传统与未来的创新实验室。
            </p>
          </div>
          <div>
            <h4 class="text-amber-200 text-lg mbPrefab-4 pb-2 border-b border-amber-800">探索之旅</h4>
            <ul class="text-gray-400 space-y-2">
              <li><a href="神鳥傳説界面.html" class="hover:text-amber-200 transition-colors">神鸟传说</a></li>
              <li><a href="AI交互.html" class="hover:text-amber-200 transition-colors">互动知识图谱</a></li>
              <li><a href="VR探索.html" class="hover:text-amber-200 transition-colors">VR时空穿梭</a></li>
              <li><a href="数字神鸟珍藏馆.html" class="hover:text-amber-200 transition-colors">数字收藏馆</a></li>
            </ul>
          </div>
          <div>
            <h4 class="text-amber-200 text-lg mb-4 pb-2 border-b border-amber-800">关于团队</h4>
            <ul class="text-gray-400 space-y-2">
              <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">项目起源</a></li>
              <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">创意伙伴</a></li>
              <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">心路历程</a></li>
              <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">未来构想</a></li>
            </ul>
          </div>
          <div>
            <h4 class="text-amber-200 text-lg mb-4 pb-2 border-b border-amber-800">关注我们</h4>
            <p class="text-gray-400 text-sm mb-4">
              获取最新展览信息、活动公告和独家内容更新
            </p>
            <div class="flex space-x-4">
              <a class="social-icon w-10 h-10 flex items-center justify-center rounded-full border border-amber-700 bg-black/60" href="https://mp.weixin.qq.com/s/Gd91N-0lKqXblMExLEWIxw">
                <span class="iconify text-2xl" data-icon="mdi:wechat" style="color: #d4af37;"></span>
              </a>
              <a class="social-icon w-10 h-10 flex items-center justify-center rounded-full border border-amber-700 bg-black/60" href="https://weibo.com">
                <span class="iconify text-2xl" data-icon="mdi:weibo" style="color: #d4af37;"></span>
              </a>
              <a class="social-icon w-10 h-10 flex items-center justify-center rounded-full border border-amber-700 bg-black/60" href="#">
                <span class="iconify text-2xl" data-icon="mdi:tiktok" style="color: #d4af37;"></span>
              </a>
            </div>
            <div class="mt-6">
              <p class="text-gray-400 text-sm mb-2">邮箱: 2720329167@qq.com</p>
              <p class="text-gray-400 text-sm">电话: +86 186 2636 3570</p>
            </div>
          </div>
        </div>
        <div class="divider-gold w-full my-10"></div>
        <div class="text-center text-gray-500 text-sm">
          © 2025 五神鸟文化科技项目 | 用创新思维连接过去与未来 | 传统文化与科技融合的创新平台
        </div>
      </div>
    </footer>

    <script>
        // 滚动动画触发
        document.addEventListener('DOMContentLoaded', function() {
            const scrollElements = document.querySelectorAll('.scroll-animation');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-in');
                    }
                });
            }, {
                threshold: 0.1
            });
            
            scrollElements.forEach(element => {
                observer.observe(element);
            });
            
            // 图片悬停标签效果
            const imageContainers = document.querySelectorAll('.image-container');
            imageContainers.forEach(container => {
                container.addEventListener('mouseenter', function() {
                    this.querySelector('.image-label').style.opacity = '1';
                });
                
                container.addEventListener('mouseleave', function() {
                    this.querySelector('.image-label').style.opacity = '0';
                });
            });
        });
    </script>

</body></html>